<template>
    <el-button style="margin-top: 20px; width: 200px; margin-left: 20px" type="primary" @click="startFlowList()">发起流程</el-button>

    <div class="myCompleteFlowList" v-loading="globalLoading">
        <el-collapse @change="handleChange" accordion>
            <el-collapse-item v-for="item in myCompleteList" :key="item.id" :name="item.flowId">
                <template #title>
                    <span style="font-size: 18px; color: #037cde; margin-right: 20px">{{item.flowNameCn + ' - ' + item.flowNameEn}}</span>
                    <el-tag type="primary">{{ item.instanceCount }}</el-tag>
                </template>
                <div v-loading="tableLoading">
                    <el-table
                        :data="flowInstanceList"
                        style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                        row-key="id"
                        :show-overflow-tooltip="true"
                        class="tableContainer"
                        max-height="70vh"
                    >
                        <el-table-column prop="id" label="流程实例ID" />
                        <el-table-column prop="flowId" label="流程ID" />
                        <el-table-column prop="flowVersion" label="流程版本" />
                        <el-table-column prop="currentNode" label="当前结点ID" />
                        <el-table-column prop="status" label="流程状态" >
                            <template #default="scope">
                                <el-tag type="warning" v-if="scope.row.status === `STARTING`">启动中</el-tag>
                                <el-tag type="primary" v-if="scope.row.status === `RUNNING`">进行中</el-tag>
                                <el-tag type="success" v-if="scope.row.status === `FINISH`">已结束</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startBy" label="发起人" />
                        <el-table-column prop="formInstanceId" label="表单实例ID" />
                        <el-table-column align="center" :width="300">
                            <template #header>
                                <span>操 作</span>
                            </template>
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="queryHistory(scope.row)">
                                    查 看
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </el-collapse-item>
        </el-collapse>
    </div>

    <div>
        <el-dialog
            v-model="startFlowListDialogFlag"
            title="发起流程"
            width="50%"
            :close-on-click-modal="false"
        >
            <div v-loading="queryStartFlowListLoading">
                <el-card style="width: 180px; display: inline-block; margin-right: 20px; margin-top: 10px" v-for="item in canStartFlowList" :key="item.id"
                         shadow="hover" class="cardClass" @click="clickCard(item)">
                    <span> {{item.nameCn}}</span>
                </el-card>
            </div>

        </el-dialog>
    </div>
</template>

<script>
import {queryFlowPageList, queryHistoryCompleteList, queryHistoryInstanceList} from "@/request/flow";

export default {
    name: "CompleteHistoryList",
    data() {
        return {
            startFlowListDialogFlag: false,
            canStartFlowList: [],
            queryStartFlowListLoading: false,
            myCompleteList: [],
            flowInstanceList: [],
            tableLoading: false,
            globalLoading: false
        }
    },
    methods: {
        startFlowList() {
            this.canStartFlowList = []
            this.startFlowListDialogFlag = true
            this.queryStartFlowListLoading = true
            let param = {
                pageInfo: {
                    pageIndex: 1,
                    pageSize: 9999
                },
                status: "ONLINE"
            }
            // 查询所有可发布的流程
            queryFlowPageList(param).then(res => {
                this.canStartFlowList = res.data.dataList;
                this.queryStartFlowListLoading = false;
            }).catch(res => {
                this.queryStartFlowListLoading = false;
            })
        },
        clickCard(item) {
            this.queryStartFlowListLoading = true;
            // 点击卡片，跳转到发起流程界面
            let realRoute = this.$router.resolve({
                path: "/ywu/ywu-flow/ywuLowcodeFlowTodoIndex/ywuFlowStartInstance",
                query: {id: item.id}
            });
            this.$window.open(realRoute.href, `_blank`)
            this.queryStartFlowListLoading = false;
            this.startFlowListDialogFlag = false;
        },
        queryHistory(row) {
            let realRoute = this.$router.resolve({
                path: "/ywu/ywu-flow/ywuLowcodeFlowTodoIndex/ywuLowcodeHistoryDetail",
                query: {id: row.id}
            });
            this.$window.open(realRoute.href, `_blank`)
        },
        handleChange(activeNames) {
            this.flowInstanceList = []
            this.tableLoading = true
            // 查询实例代办列表
            queryHistoryInstanceList({flowId: activeNames}).then(res => {
                if (res.code === "200") {
                    this.flowInstanceList = res.data;
                }
                this.tableLoading = false;
            }).catch(res => {
                this.tableLoading = false;
            })
        }
    },
    created() {
        // 查询代办列表
        this.queryStartFlowListLoading = false
        this.globalLoading = true;
        queryHistoryCompleteList({}).then(res => {
            if (res.code === "200") {
                this.myCompleteList = res.data;
            }
            this.globalLoading = false;
        }).catch(res => {
            this.globalLoading = false;
        })
    }
}
</script>

<style scoped lang="less">
.cardClass:hover{
    cursor: pointer;
}

.myCompleteFlowList {
    margin-top: 30px;
    margin-left: 20px;
}
</style>